<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>商品购物车</title>
<link rel="stylesheet"
	href="/wk1un2_electricity_digital/Backstage/layui/css/layui.css" />
	<style type="text/css">
body {
	margin: 10px;
}
.layui-table-cell {
	text-align: center;
	white-space: normal;
}
</style>
</head>

<body>

	<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">用户姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="u_id" id="u_id" placeholder="请输入用户姓名"
					class="layui-input">
			</div>
			<button class="layui-btn" id="search" data-type="reload">查询</button>
		</div>
	</div>
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!-- 添加，修改，删除 -->
	 <script type="text/html" id="userTpl">
      {{#  if(d.u_id == 1){ }}
          <span style="color: #F581B1;">李四</span>
      {{#  } else if(d.u_id == 2){ }}
          <span style="color: #1e9fff;">王五</span>
      {{#  } else if(d.u_id == 3){ }}
          <span style="color: #08f55f;">小明</span>
      {{#  } else if(d.u_id == 4){ }}
          <span style="color: #08f55f;">张三</span>
      {{#  }else if(d.u_id == 5){ }}
          <span style="color: #08f55f;">赵六</span>
      {{#  }else if(d.u_id == 6){ }}
          <span style="color: #08f55f;">张三</span>
      {{#  } }}
         </script>
          <script type="text/html" id="proTpl">
      {{#  if(d.p_id == 1){ }}
          <span style="color: #F581B1;">HUAWEI Mate 40 Pro 5G 全网通</span>
      {{#  } else if(d.p_id == 2){ }}
          <span style="color: #1e9fff;">荣耀Play4</span>
      {{#  } else if(d.p_id == 3){ }}
          <span style="color: #08f55f;">HUAWEI MateBook X</span>
      {{#  }else if(d.p_id == 4){ }}
          <span style="color: #08f55f;">荣耀MagicBook Pro</span>
      {{#  }else if(d.p_id == 5){ }}
          <span style="color: #08f55f;">华为MatePad Pro</span>
      {{#  }else if(d.p_id == 6){ }}
          <span style="color: #08f55f;">荣耀平板V6</span>
      {{#  }else if(d.p_id == 7){ }}
          <span style="color: #08f55f;">华为FreeBuds 3</span>
      {{#  } }}
         </script>
         
          <script type="text/html" id="procolorTpl">
      {{#  if(d.ps_id == 1){ }}
          <span style="color: #F581B1;">亮黑色</span>
      {{#  } else if(d.ps_id == 2){ }}
          <span style="color: #1e9fff;">星际黑</span>
      {{#  } else if(d.ps_id == 3){ }}
          <span style="color: #08f55f;">亮银色</span>
      {{#  }else if(d.ps_id == 4){ }}
          <span style="color: #08f55f;">哑光黑</span>
      {{#  } }}
         </script>
         
	<!--检查js文件是否引入成功-->
	<script type="text/javascript"
		src="/wk1un2_electricity_digital/Backstage/layui/layui.js"></script>
	<script>
		layui.use('table',
						function() {
							var table = layui.table;
							var $ = layui.jquery;
							table.render({
										elem : '#test',
										toolbar : '#toolbarDemo',
										url : '/wk1un2_electricity_digital/Backstage/getAllShoppingCart',
										where : {
											method : 'getAll',
											u_id : ''
										},
										method : 'POST',
										cols : [ [ {
											type : "checkbox",
											fixed:'left',
											width : 50
										}, {
											field : 'sc_id',
											width : 110,
											title : '购物ID',
											fixed:'left',
											sort : true,
											align : "center"
										},{
											field : 'u_id',
											width : 180,
											title : '用户名',
											align : "center",
											templet : '#userTpl'
										},{
											field : 'p_id',
											width : 180,
											title : '商品名称',
											align : "center",
											templet : '#proTpl'
										},  {
											field : 'ps_id',
											width : 180,
											title : '商品颜色',
											align : "center",
											templet : '#procolorTpl'
										}, {
											field : 'as_number',
											width : 180,
											title : '加购数量',
											align : "center"
										}, {
											field : 'as_createtime',
											width : 200,
											title : '加购时间',
											align : "center"
										},{
											field : 'as_updatetime',
											width : 200,
											title : '修改加购时间',
											align : "center"
										} ] ],
										id : 'testReload',
										page : true

									});
							
							$('#search').on('click', function() {
								var u_id = $("#u_id").val();
								table.reload('testReload', {//testReload,是上面渲染表格的id
									where : {//接口需要的两个请求参数
										'u_id' : u_id,
									}
								});
							});
						});
					</script>
</body>


</html>